<template>
  <a-card :loading="loading" :bordered="false" :body-style="{padding: '0',boxSizing: 'border-box'}" style='border-radius: 8px;margin-bottom: 12px;'>
    <div class='big-box'>
      <a-row>
        <a-col :xl="8" :lg="8" :md="8" :sm="8" :xs="8">
          <div class='title-text'> 新品铺市分析 </div>
        </a-col>
        <a-col :xl="16" :lg="16" :md="16" :sm="16" :xs="16" style='text-align: right'>
<!--          <a-button  @click="downExportXls()" style='margin-right: 12px'> 返回上一级 </a-button>-->
          <a-button type="primary"  @click="downExportXls()" > 导出 </a-button>
        </a-col>
      </a-row>
      <div class='border-bottom'></div>
      <div id="myChartNewShop" :style="{width: '100%', height: '500px'}"></div>
      <div style='margin: 24px'>
        <a-table
          ref="table"
          size="mini"
          :scroll="{x:'max-content'}"
          rowKey="type"
          :pagination='false'
          :columns="columns"
          :dataSource="dataSource"
        />
      </div>
  </div>

  </a-card>
</template>

<script>
import { triggerWindowResizeEvent,thousands } from '@/utils/util'
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/component/graphic');
require('echarts/lib/chart/bar');


export default {
  name: 'eChars',
  props:['data'],
  data () {
    return {
      myChart:null,
      columns:[],
      dataSource:[],
      option: {
        // title: {
        //   text:'库存分析',
        //   textAlign:'cenetr',
        //   left: "46%"
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: (params) => {
            if (!params.length) return ''
            let s = params[0].axisValueLabel + '<br/>'
            for (const iterator of params) {
              // 如果是负数则反转
              let d = iterator.data < 0 ? -iterator.data : iterator.data
              s += iterator.marker + iterator.seriesName + '：' + d + '<br/>'
            }
            return s
          }
        },
        legend: {
          data: [ '新品合计-销售额','新品铺市未达标门店数'],
          top:20,
        },
        grid: {
          top: '12%',
          left: '5%',
          right: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            position:'top',
            axisLabel: {
              formatter: (value) => {
                // 负数取反 显示的就是正数了
                if (value < 0) return -value
                else return value
              }
            }
          }
        ],
        yAxis: [
          {
            show:false,
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['一区', '二区', '三区', '四区', '五区', '六区', '七区'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        series: [
          {
            name: '新品铺市未达标门店数',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              color:'#000',
              formatter: (value) => {
                return `${value.name} : ${value.data}`
              }
            },
            data: [320, 302, 341, 374, 390, 450, 420],
            itemStyle: {
              color: '#F5F5F5'
            },
            barWidth:'60%'
          },
          {
            name: '新品合计-销售额',
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              color:'#FFF',
              formatter: (value) => {
                return `${value.name} : ${-value.data}`
              }
            },
            data: [-120, -132, -101, -334, -190, -230, -210],
            itemStyle: {
              color: '#0099FF'
            },
            barWidth:'60%'
          }
        ]
      },
    }
  },

  watch: {
    data (val) {
      if(val.length){
        let _this=this
        let list=val.filter(item=>item.orgName!=='合计')
        _this.option.yAxis[0].data = list.map(item=>item.orgName)
        _this.option.series[0].data = list.map(item=>item.num||0)
        _this.option.series[1].data = list.map(item=>-(item.allAmount))
        _this.myChart.setOption(_this.option);

        let columns=[
          {
            title: '新品铺市分析',
            align: 'left',
            width:150,
            // fixed:'left',
            dataIndex: 'type'
          },
        ]
        let dataSource=[
          {
            type:'新品合计-销售额',
          },
          {
            type:'新品铺市未达标门店数',
          }
        ]
        val.map(item=>{
          columns.push({
            title: item.orgName,
            align: 'left',
            width:100,
            dataIndex: item.orgName
          })
          dataSource[0][item.orgName]=thousands(item.allAmount||0)
          dataSource[1][item.orgName]=thousands(item.num||0)
        })
        this.dataSource=dataSource
        this.columns=columns
      }
    }
  },

  mounted(){
    setTimeout(()=>{
      this.$nextTick(()=>{
        this.drawLine();
        window.addEventListener ('resize',() => { //监听窗口变化
          this.myChart.resize();
        })
      })
    },100)

  },
  methods: {
    drawLine(){
      let _this=this
      // 基于准备好的dom，初始化echarts实例
      _this.myChart = echarts.init(document.getElementById('myChartNewShop'))
      // 绘制图表
      _this.myChart.setOption(this.option);
      // _this.myChart.on('click', function (event) {
      //   if (event.data) {
      //     console.log(event.data)
      //     _this.myChart.setOption({
      //       yAxis: {
      //         data: [0,1,1,1,12,3,21,]
      //       },
      //       series: {
      //         name: '收入',
      //         data:  [0,1,1,12,3,21,3123],
      //       },
      //       graphic: [
      //         {
      //           type: 'text',
      //           left: 50,
      //           top: 20,
      //           style: {
      //             text: '返回上一级',
      //             fontSize: 14
      //           },
      //           onclick: function () {
      //             _this.myChart.setOption(_this.option,true);
      //           }
      //         }
      //       ]
      //     });
      //   }
      // });
    },

    downExportXls(){
      this.$emit('export','ka_order_new_products_service')
    },






  }
}
</script>

<style scoped>
.big-box{
  box-sizing: border-box;
  /*border-bottom: 4px solid #EEF1F4;*/
  padding: 12px;
}
.title-text{
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #191a1a;
}
.border-bottom{
  margin-top: 2px;
  width: 100%;
  height: 1px;
  border: 1px solid #f5f5f5;
}
</style>